<template>
  <page-meta :page-style="$theme.pageStyle">
    <!-- #ifndef H5 -->
    <navigation-bar
        :front-color="$theme.navColor"
        :background-color="$theme.navBgColor"
    />
    <!-- #endif -->
  </page-meta>
  <view class="index" :style="{backgroundImage: `url(${$domain}/static/icons/matchmaker/posterBg.png)`}">

    <!--顶部-->
    <u-navbar
        :safeAreaInsetTop="false"
        :placeholder="false"
        :is-back="true"
        :is-fixed="true"
        :backIconColor="'#fff'"
        :title="'专属海报'"
        :border-bottom="false"
        :title-bold="true"
        :title-color="'#ffffff'"
        :background="{ background : navBg }"
    >
    </u-navbar>
    
    <view class="page-poster">
      <image class="poster-bg" mode="aspectFit" :src="`${$domain}/static/icons/matchmaker/posterBox.png`"></image>
      <view class="poster-con">
        <image class="con-avatar" mode="aspectFit" src="/static/images/user/default_avatar.png"></image>
        <view class="con-name">
          这个人很懒    
        </view>
        <view class="con-ewm">
          <image class="ewm-pic" :show-menu-by-longpress="true" mode="aspectFit" src="http://www.jiushuitv.com/content/images/qrcode.jpg"></image>
        </view>
        <view class="con-text">
          长按识别二维码开始脱单
        </view>
        <image class="con-logoText" mode="aspectFit" :src="`${$domain}/static/icons/matchmaker/posterText.svg`"></image>
      </view>
    </view>

    <view class="page-bottom">
      <view class="bottom-btn">
        保存海报
      </view>
    </view>
    <view class="page-bottomFooter"></view>
  </view>
</template>

<script setup lang="ts">
import {computed, reactive, ref} from 'vue'
import {onPageScroll} from "@dcloudio/uni-app";

const navBg = ref<string>('rgba(255,255,255,0)')

onPageScroll((event: any) => {
  navBg.value = event.scrollTop > 10 ? '#fff' : 'rgba(255,255,255,0)'
})

const navChange = (item: any) => {
  console.log('item', item)
}

const navCurrent = ref(0)
const navList = ref([
  {
    name: '收益明细',
    id: '',
  },
  {
    name: '支出明细',
    id: 1,
  }
])

const navTo = (url: any) => {
  uni.navigateTo({url})
}
</script>

<style lang="scss" scoped>
.index {
  padding-bottom: 60rpx;
  position: relative;
  background-repeat: no-repeat;
  background-size: 100% auto;
  overflow: hidden;
  width: 100%;
  transition: all 1s;
  min-height: calc(100vh - env(safe-area-inset-bottom));
}

.page-poster {
  width: calc(100% - 60rpx);
  margin: 0 auto;
  position: relative;
  .poster-bg {
    position: absolute;
    left: 0;
    top: calc(115rpx - 30rpx);
    width: 100%;
    height: 100%;
    z-index: 0;
  }
  .poster-con {
    text-align: center;
    position: relative;
    z-index: 1;
    padding: 30rpx 30rpx;
    .con-avatar {
      width: 230rpx;
      height: 230rpx;
      border-radius: 50%;
      margin: 0 auto;
      border: 4rpx solid #ffffff;
    }
    .con-name {
      font-size: 28rpx;
      color: #111111;
      text-align: center;
    }
    .con-ewm {
      display: inline-block;
      width: 400rpx;
      height: 400rpx;
      padding: 10rpx;
      background-color: #ffffff;
      border-radius: 20rpx;
      margin-top: 20rpx;
      .ewm-pic {
        width: 380rpx;
        height: 380rpx;
      }
    }
    .con-text {
      font-size: 24rpx;
      color: var(--color-minor);
      margin-top: 30rpx;
    }
    .con-logoText {
      display: inline-block;
      width: 376rpx;
      height: 50rpx;
      margin-top: 60rpx;
    }
  }
}

.page-bottom {
  width: 100%;
  padding: 30rpx 30rpx calc(30rpx + env(safe-area-inset-bottom));
  position: fixed;
  bottom: 0;
  z-index: 2;
  .bottom-btn {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    background-color: rgba(255,255,255,.3);
    color: #ffffff;
    font-size: 30rpx;
    font-weight: bold;
    border-radius: 40rpx;
  }
  &Footer {
    height: calc(140rpx + env(safe-area-inset-bottom));
  }
}
</style>
